<template>
  <div class="Header">
    <div class="header_bgc">
      <!-- 导航栏 -->
      <div class="Header_bottom_bar">
        <div class="Header_bottom_container">
          <div class="Header_bottom_nav">
            <div class="Header_bottom_collapse">
              <div class="icon_img">
                <img src="/logo.png" alt="" />
                <span class="header_text">综合素养挑战赛</span>
              </div>
              <ul>
                <li
                  v-for="item in headeer_bar"
                  :key="item.id"
                  @click="handleActive(item.id)"
                  :class="{ active: active === item.id }"
                >
                  <el-tooltip
                    content="请联系管理员"
                    placement="bottom"
                    effect="light"
                  >
                    <div class="imgOrname">
                      <img :src="item.icon" alt="" />
                      <a href="javascript:;">{{ item.name }}</a>
                    </div>
                  </el-tooltip>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <img
          class="bgc_over"
          src="@/assets/images/Home/home_header.png"
          alt=""
        />
        <div class="container main_content">
          <!-- 左侧登录 -->
          <div class="main_left">
            <span class="main_left_text">AI Will 综合素养挑战赛</span>
            <p>登录后即可报名比赛</p>
            <div class="main_btn">
              <span class="main_left_bt" @click="handleRegister">注册</span>
              <span class="main_left_bt" @click="handleLogin">登录</span>
            </div>
          </div>
          <!-- 右侧图片 -->
          <div class="main_right">
            <img src="@/assets/images/Home/home_header_right.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 比赛项目 -->
      <div class="competition">
        <div class="container competition_content">
          <h3 class="content_h3">比赛项目</h3>
          <div class="content_list">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="list_row">
                    <div class="row_list">
                      <img src="@/assets/images/Home/row1.png" alt="" />
                    </div>
                    <div class="row_bgc">
                      <span>图形化编程</span>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="list_row">
                    <div class="row_list">
                      <img src="@/assets/images/Home/row2.png" alt="" />
                    </div>
                    <div class="row_bgc">
                      <span>Python代码</span>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="list_row">
                    <div class="row_list">
                      <img src="@/assets/images/Home/row3.png" alt="" />
                    </div>
                    <div class="row_bgc">
                      <span>C++代码</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关于比赛 -->
      <div class="aboutcompetition">
        <div class="container aboutcompetition_content">
          <h3 class="content_h3">关于比赛</h3>
          <div class="textOrimg">
            <div class="content_text">
              <p>
                AI
                Will综合素养挑战赛是面向青少年的人工智能教育比赛项目。该项目需要根据自身特点，做出比赛组织、赛程安排、评分方法等方面的相关规定和说明。
              </p>
              <p>
                为了保证比赛的顺利进行，建立了一套比赛的整体概念准则。这些准则对于理解比赛的根本目的和要求有重要作用。
              </p>
            </div>

            <!-- 图片 -->
            <div class="footer_img"></div>
          </div>
        </div>
      </div>
      <!-- 备案号 -->
      <div class="internet_content_provider">
        <div class="container provider_content">
          <p class="provider_text">
            湖南中工教育科技有限公司 地址：湖南省长沙市芙蓉区乔庄巷78号物语南院
            联系电话：132 6936 6852
          </p>
          <p class="provider_text"></p>
        </div>
      </div>
    </div>
  </div>
</template>


<script  setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import d1 from "@/assets/images/Home/organ1.png";
import d2 from "@/assets/images/Home/organ2.png";
import d3 from "@/assets/images/Home/organ3.png";
import d4 from "@/assets/images/Home/organ4.png";

const headeer_bar = [
  {
    id: 1,
    name: "首页",
    icon: d1,
  },
  {
    id: 2,
    name: "竞赛流程",
    icon: d2,
  },
  {
    id: 3,
    name: "通知公告",
    icon: d3,
  },
  {
    id: 4,
    name: "赛事帮助",
    icon: d4,
  },
];
const active = ref(1);
const handleActive = (activeId) => {
  active.value = activeId;
};
const router = useRouter();
const handleRegister = () => {
  router.push("/auth/reg");
};
const handleLogin = () => {
  router.push("/auth/login");
};
onMounted(() => {
  // Swiper配置
  new Swiper(".swiper-container", {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    loop: true,
  });
});
</script>

<style lang="scss" scoped>
.container {
  max-width: 1170px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.Header {
  .header_bgc {
    width: 100%;
    height: 801px;
    position: relative;

    // 导航栏
    .Header_bottom_bar {
      width: 100%;
      z-index: 99;
      position: absolute;
      top: 0;
      -webkit-transition: all ease 1s;
      transition: all ease 1s;

      .Header_bottom_container {
        max-width: 1170px;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;

        //   导航栏
        .Header_bottom_nav {
          display: flex;
          align-items: center;
          flex-flow: row;
          justify-content: flex-start;
          // padding: 0 20px !important;
          // background-image: -webkit-linear-gradient(
          //   0deg,
          //   #5d5df9 0,
          //   #312366 100%
          // );
          z-index: 10;

          .Header_bottom_collapse {
            width: 100%;
            display: flex !important;
            flex-direction: row;
            flex-basis: auto;
            flex-grow: 1;
            flex: 1;
            align-items: center;

            .icon_img {
              display: flex;
              align-items: center;

              img {
                width: 100px;
              }
            }

            .header_text {
              font-size: 24px;
              font-weight: 500;
              line-height: 78px;
              margin-left: 15px;
              margin-right: 83px;
              color: #ffffff;
            }
            .imgOrname {
              display: flex;
              align-items: center;
              justify-content: center;
            }

            ul {
              display: flex;

              li {
                cursor: pointer;
                display: flex;
                margin: 0;
                color: #fff;
                line-height: 1.7;
                font-size: 16px;
                padding: 25px 18px;
                transition: all 0.5s;
                align-items: center;

                img {
                  width: 16px;
                  height: 16px;
                  margin-right: 8px;
                }

                a {
                  color: #fff;
                  font-weight: 400;
                  align-items: center;
                  font-size: 14px;
                  text-transform: capitalize;
                  border-bottom: 2px solid transparent;
                  font-family: var(--heading-font);
                }
              }

              .active {
                background: rgba(255, 255, 255, 0.2);
                border-radius: 0px 0px 12px 12px;
              }
            }
          }
        }
      }
    }

    .main {
      width: 100%;

      position: relative;
      top: 0;
      .bgc_over {
        width: 100%;
        height: 801px;
        margin-bottom: 68px;
        cursor: pointer;
      }

      .main_content {
        display: flex;
      }

      .main_left {
        position: absolute;
        top: 28%;
        margin-right: 95px;

        .main_left_text {
          font-size: 36px;
          font-weight: normal;
          line-height: 36px;
          letter-spacing: 0px;
          color: #ffffff;
        }

        .main_btn {
          display: flex;

          .main_left_bt {
            cursor: pointer;
            width: 134px;
            height: 52px;
            border-radius: 8px;
            font-size: 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            box-sizing: border-box;
            border: 2px solid #ffffff;

            &:nth-child(2) {
              margin-left: 53px;
              background-color: #fff;
              color: #1964d6;
            }
          }
        }

        p {
          margin: 31px 0 57px 0;
          font-size: 28px;
          font-weight: normal;
          line-height: 36px;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }

      .main_right {
        position: absolute;
        margin-left: 480px;
        top: 10%;
        width: 789px;
        height: 547px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 比赛项目
    .competition {
      width: 100%;
      margin-bottom: 83px;

      .competition_content {
        display: flex;
        flex-direction: column;

        .content_h3 {
          text-align: center;
          font-size: 36px;
          font-weight: normal;
          line-height: 36px;
          letter-spacing: 0px;

          color: #1964d6;
          margin-bottom: 30px;
        }

        .content_list {
          // width: 960px;
          // margin: 0 auto;
          display: flex;
          justify-content: center;

          /* 外层容器 */
          .swiper {
            width: 1024px;
            height: 300px;
          }

          .swiper-slide {
            text-align: center;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;

            transition: 300ms;
            transform: scale(0.8);
            z-index: 1;
          }

          .swiper-slide-active,
          .swiper-slide-duplicate-active {
            transform: scale(1) translateX(0%);
            z-index: 9;
          }

          .swiper-slide-prev {
            transform: translateX(30%) scale(0.8);
          }

          .swiper-slide-next {
            transform: translateX(-30%) scale(0.8);
          }

          .list_row {
            position: relative;
            width: 100%;
            // width: 100%;
            height: 280px;
            border-radius: 30px;
            padding-top: 8px;
            background: rgba(25, 100, 214, 0.1);
            box-sizing: border-box;
            border-image: linear-gradient(
                129deg,
                rgba(255, 255, 255, 0.3) 2%,
                rgba(0, 0, 0, 0.3) 101%
              )
              1;

            backdrop-filter: blur(20px);

            .row_list {
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .row_bgc {
              position: absolute;
              bottom: 0;
              width: 100%;
              text-align: center;
              background: rgba(25, 100, 214, 0.6);
              // width: 380px;
              height: 60px;
              line-height: 60px;
              border-radius: 0px 0px 30px 30px;
              box-sizing: border-box;
              z-index: 2;
              border-image: linear-gradient(
                  105deg,
                  rgba(255, 255, 255, 0.3) 6%,
                  rgba(0, 0, 0, 0.3) 97%
                )
                1;

              span {
                font-size: 24px;
                font-weight: normal;
                line-height: 31.2px;
                letter-spacing: 0px;

                color: #ffffff;
              }
            }
          }

          .carousel_list {
            // display: flex;
            // justify-content: center;
            width: 100%;

            .carousel_item_list {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
            }
          }
        }
      }

      .el-carousel__item--card {
        width: auto;
      }
    }

    // 关于比赛
    .aboutcompetition {
      width: 100%;
      height: 554px;
      opacity: 1;
      margin-bottom: 20px;
      background: rgba(25, 100, 214, 0.1);

      .aboutcompetition_content {
        width: 100%;
        height: 100%;

        .content_h3 {
          padding-top: 83px;
          font-size: 36px;
          font-weight: normal;
          line-height: 36px;
          letter-spacing: 0px;

          color: #1964d6;
        }

        .textOrimg {
          display: flex;

          .content_text {
            width: 601px;
            height: 294px;
            margin-top: 58px;
            margin-right: 101px;

            p {
              font-size: 24px;
              font-weight: normal;
              line-height: 36px;
              text-indent: 2em;
              letter-spacing: 0px;
              color: #333333;

              &:nth-child(1) {
                margin-bottom: 20px;
              }
            }
          }

          .footer_img {
            position: relative;
            width: 460px;
            height: 311px;
            border-radius: 8px;
            background: #1964d6;
            backdrop-filter: blur(10px);

            border-radius: 8px;

            &::before {
              content: "";
              position: absolute;
              top: 20px;
              right: 20px;
              width: 460px;
              height: 311px;
              background: url("@/assets/images/Home/footer_school.png");
            }
          }
        }
      }
    }

    // 备案号
    .internet_content_provider {
      width: 100%;

      .provider_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 10px;

        .provider_text {
          font-size: 12px;
          font-weight: normal;
          line-height: 20px;
          text-align: center;
          letter-spacing: 0px;
          color: #cccccc;
        }
      }
    }
  }
}
</style>